import React from 'react'
import {NavLink} from 'react-router-dom'
import { connect } from 'react-redux'
import './serviceStyle.less'

const mapStateToProps = (state) => {
  return {
      userInfo: state.app.userInfo
  }
}
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    openModal: (msg) => dispatch(global.allActions.appActions.openModal(msg))
  }
}
class Auth extends React.Component<any, any> {
  public constructor(props) {
    super(props)
    this.state = {
      idTip: '',
      realnameTip: '',      
      idNo: '',
      realname: '',
    }
  }
  
  public componentDidMount() {

  }

  submitForm() {
    console.log(this.state);
    const {idTip, realnameTip, idNo, realname} = this.state
    const hasErr = idNo === '' || realname === ''
    if (idNo === '') {
      this.setState({idTip: '请输入身份证号码'})
    } else {
      this.setState({idTip: ''})
    }
    if (realname === '') {
      this.setState({realnameTip: '请输入姓名'})
    } else {
      this.setState({realnameTip: ''})
    }
    if (!hasErr) {
      const url = `${config.pre}/userAuthentication/RealName/${Cookies.get('areaCode')}`
      const send = {
        idNo,
        realName: realname
      }
      const opt = {
        method: 'POST',
        body: JSON.stringify(send)
      }
      fetchJson(url, opt).then(data => {
        this.props.openModal(data.message)
      })
    }
  }

  public render() {
    const {idTip, realnameTip, idNo, realname} = this.state
    return <div className="view-page center-view">
      <div className="record-top text-center">
        <img src="img/userCenter/ballons.png?v=20181201" className="ballon animated infinite fadeInUp" alt="" />
        <img src="img/app/shuaishuai-hy-text.png?v=20181201" className="shuai-text animated infinite" alt="" />    
      </div>
      <div className="record-middle">
        <div className="service-top">
          <img className="full pos-abs" src="img/userCenter/info-kuang1.png?v=20181201" alt=""/>
          <div className="underbg">
            <img className="service-header" src={this.props.userInfo.headUrl} alt=""/>
            <div className="service-top-info mlr-6">
              <div className="mtr-3">{this.props.userInfo.nickname}<span className="mlr-10">游戏ID: {this.props.userInfo.lftid}</span></div>
              <div className="mtr-3">寻求客服帮助时,请告知游戏ID</div>
            </div>
          </div>
        </div>
        <div className="auth-bottom">
          <img className="full pos-abs" src="img/userCenter/info-kuang2.png?v=20181201" alt=""/>
          <div className="underbg">
            <form className="pure-form pure-form-aligned auth-from text-center">
              <fieldset>
                <div className="pure-control-group">
                  <label htmlFor="name">身份证</label>
                  <input value={idNo} onChange={(e: any) => this.setState({idNo: _.trim(e.target.value)})} id="name" type="text" placeholder="身份证"></input>
                  {/* <span className="pure-form-message-inline">{idTip}</span> */}
                </div>
                <div className="pure-control-group">
                  <label htmlFor="password">姓名</label>
                  <input value={realname} onChange={(e: any) => this.setState({realname: _.trim(e.target.value)})} id="password" type="text" placeholder="姓名"></input>
                  {/* <span className="pure-form-message-inline">{realnameTip}</span> */}
                </div>
              </fieldset>
              <img onClick={this.submitForm.bind(this)} src="img/userCenter/auth-submit.png?v=20181201" className="auth-submit" alt=""/>
            </form>
          </div>
        </div>
      </div>
      <div className="usercenter-bottom">
        <img className="bar" src="img/app/kuang-bottom.png?v=20181201" alt=""/>
        <div className="text">
          <img className="bottom-title" src="img/app/bottom-title/real-name.png?v=201811272534" alt=""/>

        </div>
        <NavLink to="/UserCenter"><img className="back" src="img/app/back.png?v=20181201" alt=""/></NavLink>
      </div>
    </div>
  }

}

export default connect(mapStateToProps, mapDispatchToProps)(Auth)